<template>
  <div id="Address">
         <!-- 头部 -->
    <div class="home_top">
          <van-nav-bar title="选择收货地址" left-text="返回" left-arrow
             @click-left="onClickLeft"
             @click-right="onClickRight"
            >
            <template #right>
              <van-icon name="ellipsis" size="18" />
            </template>
          </van-nav-bar>
    </div>
    <!-- 默认地址 --> 
    <div class="count">

    
    
    <div class="default_assress"
        v-for="item in list" :key="item.id"
        >
        <div class="assress">
            <p class="assress_n"><span>{{item.name}}</span>&nbsp;<span>{{item.tel}}</span></p>
            <p class="asserss_minute">{{item.address}}</p>
            <div class="default" v-if="item.isDefault">默认</div>
        </div>

    </div>
    <router-link to='/EditorAddress'>
        <button>添加新地址</button>
    </router-link>

</div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name:"Address",
    data(){
        return{
            list: [
                {
                    id: '1',
                    name: '李先生',
                    tel: '13423433424',
                    address: '广东省佛山市禅城区印象购物中心5号楼b-10122 1902室',
                    isDefault: true,
                },
                {
                    id: '2',
                    name: '李先生',
                    tel: '13423433424',
                    address: '广东省佛山市禅城区印象购物中心5号楼b-10122 1902室',
                },
                ],
                
        }
    },
     methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
		
    },
  },
    
}
</script>

<style lang="less">
body{
     background: #eeeeee;
}
.count{
    padding-top: 90px;
}
.default_assress{
    width: 100%;
    margin-top: 20px;
    .assress{
        width: 100%;
        height: 170px;
        padding-left: 44px;
        box-sizing: border-box;
        background: #fff;
        position: relative;
        .assress_n{
            width: 80%;
            span{
                font-size: 28px;
                color: #000;
            }
        }
        .asserss_minute{
            width: 80%;
            font-size: 22px;
            line-height: 31px;
            color: #666666;
        }
        .default{
            width: 70px;
            height: 70px;
            background: #ffa1a1;
            border: 1PX solid #ff4242;
            border-radius: 50%;
            font-size: 20px;
            text-align: center;
            line-height: 70px;
            color: #fff;
            position: absolute;
            top: 50px;
            right: 28px;
        }
        
    }
}
// 添加新地址
button{
    width: 90%;
    height: 100px;
    background: #234497;
    color: #fff;
    font-size: 29px;
    letter-spacing: 6px;
    display: block;
    margin:0 auto;
    margin-top: 22px;
    border: none;
}
</style>
